<template>
  <div class="svg-demo-container">
    <h2>Vue3 SVG 使用示例</h2>

    <!-- 1. 内联 SVG -->
    <div class="demo-section">
      <h3>1. 内联 SVG</h3>
      <svg
        class="inline-svg"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        :width="svgSize"
        :height="svgSize"
        @click="toggleColor"
      >
        <circle
          cx="12"
          cy="12"
          r="10"
          :fill="circleColor"
          :stroke="strokeColor"
          stroke-width="2"
          :opacity="circleOpacity"
        />
        <path d="M12 6v6l4 2" fill="none" stroke="white" stroke-width="2" />
      </svg>
      <p>点击圆形可切换颜色</p>
    </div>

    <!-- 2. 引入外部 SVG 文件 (需要配置 vue-loader 或 vite) -->

    <!-- 3. 动态控制 SVG 属性 -->
    <div class="demo-section">
      <h3>3. 动态控制 SVG 属性</h3>
      <div class="controls">
        <el-slider v-model="svgSize" :min="20" :max="100" label="大小" />
        <el-slider v-model="circleOpacity" :min="0.3" :max="1" :step="0.1" label="透明度" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 引入外部 SVG 作为组件 (需要 vite-svg-loader 或类似插件)
import { ElSlider } from 'element-plus'

// 状态管理
const svgSize = ref(60)
const circleColor = ref('#3498db')
const strokeColor = ref('#2980b9')
const circleOpacity = ref(0.8)

// 切换颜色方法
const toggleColor = () => {
  const colors = ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6']
  const currentIndex = colors.indexOf(circleColor.value)
  const nextIndex = (currentIndex + 1) % colors.length

  circleColor.value = colors[nextIndex]
  // eslint-disable-next-line no-use-before-define
  strokeColor.value = shadeColor(colors[nextIndex], -30)
}

// 辅助函数：调整颜色明暗
const shadeColor = (color, percent) => {
  let R = parseInt(color.substring(1, 3), 16)
  let G = parseInt(color.substring(3, 5), 16)
  let B = parseInt(color.substring(5, 7), 16)

  R = parseInt((R * (100 + percent)) / 100, 10)
  G = parseInt((G * (100 + percent)) / 100, 10)
  B = parseInt((B * (100 + percent)) / 100, 10)

  R = R < 255 ? R : 255
  G = G < 255 ? G : 255
  B = B < 255 ? B : 255

  R = Math.round(R)
  G = Math.round(G)
  B = Math.round(B)

  const RR = R.toString(16).length === 1 ? `0${R.toString(16)}` : R.toString(16)
  const GG = G.toString(16).length === 1 ? `0${G.toString(16)}` : G.toString(16)
  const BB = B.toString(16).length === 1 ? `0${B.toString(16)}` : B.toString(16)

  return `#${RR}${GG}${BB}`
}
</script>

<style scoped>
.svg-demo-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.demo-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid #eaeaea;
  border-radius: 8px;
}

.inline-svg {
  cursor: pointer;
  transition: all 0.3s ease;
}

.inline-svg:hover {
  transform: scale(1.05);
}

.external-svgs {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin-top: 1rem;
}

.external-svg {
  fill: currentColor;
  transition: transform 0.3s ease;
}

.external-svg:hover {
  transform: rotate(10deg);
}

.svg-img {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.svg-img:hover {
  opacity: 1;
}

.controls {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 300px;
}

.el-slider {
  width: 100%;
}
</style>
